import { useDispatch, useSelector } from "react-redux";
//导入创建action对象方法
import { increment, decrement, addToNum } from "./store/modules/counterStore";
import {fetchChannelList} from './store/modules/channelStore'
import {useEffect} from 'react'
function App() {
  const { count } = useSelector(state => state.counter)
  const { channelList } = useSelector(state => state.channel)
  const dispatch = useDispatch()
  useEffect(()=>{
    dispatch(fetchChannelList())
  },[dispatch])
  return (
    <>
      {/* 调用dispatch提交action对象 */}
      <button onClick={() => dispatch(decrement())}>-</button>
      <span>{count}</span>
      <button onClick={() => dispatch(increment())}>+</button>
      <button onClick={() => dispatch(addToNum(10))}>addTo10</button>
      <button onClick={() => dispatch(addToNum(20))}>addTo20</button>
      <ul>
        {channelList.map(item => <li key={item.id}>{item.name}</li>)}
      </ul>
    </>
  );
}

export default App;
